const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    del = require('del'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass')

//每次开启新任务之前  先删除dist
 const delDist = () => del(['dist'])

 //先把所有的任务用到的文件源路径和目标路径做一个同意的规划
 const path = {
     html: {
         src: 'src/**/*.html',
         dest: 'dist'
     },
     css: {
         src: 'src/css/**/*.scss',
         dest: 'dist/css'
     },
     js: {
         src: 'src/js/**/*.js',
         dest:'dist/js'
     },
     img: {
         src: 'src/images/**/*',
         dest: 'dist/images'
     },
     libs: {
         src: 'src/libs/**/*',
         dest: 'dist/libs'
   }
 }

//制定一个html任务：通过函数的方式
const html = () => {
    // 需要把代码return
      return gulp.src(path.html.src)
           .pipe(htmlmin(
               {
                   removeComments: true,//清除HTML注释
                   collapseWhitespace: true,//压缩HTML
                   collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
                   removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
                   removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
                   removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
                   minifyJS: true,//压缩页面JS
                   minifyCSS: true//压缩页面CSS 
                 }
           ))
           .pipe(gulp.dest(path.html.dest))
           .pipe(connect.reload())
}

//箭头函数 一句话可以省略花括号和return
//css任务:先把css
const css = () => {
    return gulp.src(path.css.src)
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
        .pipe(connect.reload())
}

//js任务
const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}

//img任务:复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

//libs任务
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

//server任务
const server = () => {
    connect.server({
        root:'dist',        //根目录
        livereload: true,   //支持刷新
        port:1913   //端口号 只要不是80就可以
    }) 
}

//制定一个ico任务：移动ico图标
const ico = () => gulp.src('src/favicon.ico').pipe(gulp.dest('dist'))

// watch任务: 监听一些文件的修改，一旦被修改就 重启相对应的任务
const watch = () => {
    gulp.watch(path.html.src,html)
    gulp.watch(path.css.src,css)
    gulp.watch(path.js.src,js)
    gulp.watch(path.img.src,img)
    gulp.watch(path.libs.src,libs)
}

// gulp.series 是同步执行任务，第一个执行完了才能执行第二个
// gulp.parallel 是异步执行，多个任务同时进行
//暴露
module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,img,libs,server,ico,watch))

// module.exports = {
//     delDist,
//     html,
//     css
// }